<template>
  <div class="treeItem">
    <mu-flexbox class="netWork treeLine treeTitle" :class="{'actived':active}" :gutter="0" justify="flex-start">
      <span class="arrow" :class="{'isopend' : isOpend}" @click="arrowClick">></span>
      <svg class="icon" aria-hidden="true" v-if="!isLoading">
        <use xlink:href="#icon-wenjian"></use>
      </svg>
      <i class="icon-spinner icon" v-if="isLoading" @click="projectClick(info)"></i>
      <mu-flexbox-item class="title">
        <span @click="projectClick(info)">{{info.projname}}</span>
      </mu-flexbox-item>
    </mu-flexbox>
    <div class="treeItem leval1" v-if="isOpend">
      <mu-flexbox class="netWork treeLine" :class="{'actived':(layeritem.layerid==activeLayerId)}" :gutter="0" justify="flex-start" v-for="(layeritem,index) in projectInfo.layerinfo">
        <span class="arrow">></span>
        <svg class="icon" aria-hidden="true" @click="layerClick(layeritem)">
          <use xlink:href="#icon-ceng"></use>
        </svg>
        <mu-flexbox-item class="title">
            <span @click="layerClick(layeritem)">{{layeritem.layername}}</span>
            <i class="icon-llalbumshopselectorcancel" @click="delClick(index)"></i>
        </mu-flexbox-item>
      </mu-flexbox>
      <!-- <div class="treeItem leval2">
        <mu-flexbox class="netWork treeLine" :gutter="0" justify="flex-start">
          <span class="arrow">></span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shenjing"></use>
          </svg>
          <mu-flexbox-item class="title">1.1.1NetWorkNetWorkNetWork</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="netWork treeLine" :gutter="0" justify="flex-start">
          <span class="arrow">></span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lianjie1"></use>
          </svg>
          <mu-flexbox-item class="title">1.1.2NetWorkNetWorkNetWork</mu-flexbox-item>
        </mu-flexbox>
      </div>
      <mu-flexbox class="netWork treeLine" :gutter="0" justify="flex-start">
        <span class="arrow">></span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ceng"></use>
        </svg>
        <mu-flexbox-item class="title">1.2NetWorkNetWorkNetWork</mu-flexbox-item>
      </mu-flexbox> -->
    </div>
    <mu-dialog :open="dialogDelLayer" title="确认删除该层？" @close="dialogDelLayer=false">
      {{delLayerName}}
      <mu-flat-button slot="actions" @click="dialogDelLayer=false" primary label="取消"/>
      <mu-flat-button slot="actions" primary @click="gotoDelLayer" :label=" isLayerDeling ? '正在删除' : '删除' " :disabled="isLayerDeling ? true : false"/>
    </mu-dialog>
  </div> 
</template>

<script>
export default {
  name: 'projecttree',
  props:['info','active'],
  data () {
    return {
      isOpend : false,
      isLoading : false,
      projectInfo:{},
      delLayerid:"",
      delLayerName:"",
      dialogDelLayer:false,
      isLayerDeling:false,
      layerChangeInfo:{}
    }
  },
  methods:{
    loadProjectInfo () {
      var self = this;
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        this.isLoading = true;
        this.$http.get(this.$root.baseUrl+'api.php/Index/nimiGetProjInfo/id/'+this.info.id+'/token/'+localStorage.nmb_token).then((response) => {
          this.isLoading = false;
          if (response.body.error == 0) {
            //this.projectInfo = response.body.data;
            for (var i = response.body.data.layerinfo.length - 1; i >= 0; i--) {
              if (response.body.data.layerinfo[i].layerdata != "") {
                var str = response.body.data.layerinfo[i].layerdata;
                //str.replace(/\n/, "");
                var obj = JSON.parse(str);
                response.body.data.layerinfo[i].layerdata = obj;
                //delete response.body.data.layerinfo[i].layerdata.SomaTypeInfo;
                // response.body.data.layerinfo[i].layerdata.SomaTypeInfo = {
                //     "SpikingOrNot":0,
                //     "Model":"HH",
                //     "Type":"Sensory",
                //     "SensoryInfo":{"RevsP":60,"Gmax":0.35,"Adaptation":1,"AdTau":50,"AdRate":0.7},
                //     "Note":"This is HH Type soma",
                //     "Capacitance":0.010,
                //     "gLeak":0.250,
                //     "Pmax":30.000,
                //     "ChannelList":[]
                // };
                // 
                delete obj.SomaTypeInfo;//去掉后报错 待处理
                console.log(obj);
              }
            }

            this.projectInfo = response.body.data;
          }
        }, (response) => {
          this.isLoading = false;
          this.$root.showToast("获取失败");
        });
      }
      else{
        this.$root.gotoLogin();
      }
    },
    arrowClick () {
      this.isOpend = !this.isOpend;
      this.$root.$refs.child.activeProject.id = this.info.id;
    },
    layerClick(info){
      if (this.$root.$refs.child.editObj.type == "layer" && info.layerid == this.$root.$refs.child.editObj.info.layerid) {
        return;
      }
      else{
        if (this.$root.$refs.child.$refs.rightEditArea.editObjIschanged) {
          this.$root.$refs.child.$refs.rightEditArea.leaveConfirmLayer = true;
        }
        else{
          var editObj = {
            type:"layer",
            info:info
          };
          this.$root.eventHub.$emit("layerClick",editObj);
        }
      }
    },
    gotoSave () {
      this.$root.$refs.child.$refs.rightEditArea.saveInfo();
    },
    projectClick (info) {
      this.$root.$refs.child.activeProject.id = this.info.id;
      this.$root.$refs.child.resetEditObj();
    },
    delClick (index) {
      this.delLayerid = this.projectInfo.layerinfo[index].layerid;
      this.delLayerName = this.projectInfo.layerinfo[index].layername;
      this.dialogDelLayer = true;
    },
    gotoDelLayer () {
      if (localStorage.nmb_token && localStorage.nmb_token!="") {
        this.isLayerDeling = true;
        this.$http.get(this.$root.baseUrl+'api.php/Index/nimiDelLayer/token/'+localStorage.nmb_token+'/layerid/'+this.delLayerid).then((response) => {
            this.isLayerDeling = false;
            this.$root.showToast(response.body.msg);
            if (response.body.error == 0) {
                this.dialogDelLayer = false;
            }
        }, (response) => {
            this.isLayerDeling = false;
            this.$root.showToast("创建失败");
        });
      }
      else{
        this.$root.gotoLogin();
      }
    },
    resetUnsavedLayer(){

    }
  },
  watch:{
    isOpend (val) {
      if (val) {
        this.loadProjectInfo();
      }
    }
  },
  computed : {
    activeLayerId () {
      var id = this.$root.$refs.child.editObj.info.layerid;
      return id;
    }
  },
  mounted () {
    
  }
}
</script>

<style scoped lang="less">
.treeItem{
  overflow: hidden;
}
.treeLine{
  width:100%;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  background-origin:content-box;
  &.actived{
    background-color: #e3f2fd;
  }
  .icon{
    font-size:22px;
    width:23px;
  }
  .title{
    font-size: 15px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-width: 100%;
    height: 28px;
    line-height: 28px;
    .icon-llalbumshopselectorcancel{
      font-size: 10px;
      color: #e91e63;
      display: none;
    }
    &:hover{
      .icon-llalbumshopselectorcancel{
        display: inline-block;
      }
    }
  }
  .arrow{
    font-size: 20px;
    width:14px;
    &.isopend{
      transform: rotate(90deg) scale(.8,1.5) translateY(-2px);
      -ms-transform: rotate(90deg) scale(.8,1.5) translateY(-2px);
      -webkit-transform: rotate(90deg) scale(.8,1.5) translateY(-2px);
      -o-transform: rotate(90deg) scale(.8,1.5) translateY(-2px);
      -moz-transform: rotate(90deg) scale(.8,1.5) translateY(-2px);
    }
  }
}
.leval1{
  .treeLine{
    .title{
      font-size: 13px!important;
    }
    .icon{
      font-size: 20px!important;
    }
    .pl(1);
    &.actived{
      background-color: #c5e1a5;
    }
  }
}
.leval2{
  .treeLine{
    .pl(2);
  }
}
.leval3{
  .treeLine{
    .pl(3);
  }
}
.pl(@num){
  margin-left:@num*15px;
  padding-right:@num*15px;
}
</style>
